<template>
  <div>
    <Header2 title="订单"></Header2>
    <div class="div" @click="xgdz()">
      <h3>{{address.split(",")[4]}} {{address.split(",")[5]}}</h3>
      <h4>{{address.split(",")[0]}}{{address.split(",")[1]}}{{address.split(",")[2]}}{{address.split(",")[3]}} </h4>
    </div>
    <div class="imgdiv">
      <img
        :src="poot+'miaozishangchengFile/commodity/'+name+'/'+name+' '+colour+'.jpg'"
        alt
        class="imgsp"
      />
      <div class="van-celldiv">
        <van-cell title is-link @click="dibu()" />
      </div>
    </div>
    <van-cell class="van-cell2" title="商品总价" :value="'￥'+jiage" />
    <van-cell class="van-cell2" title="运费" value="包邮" />
    <van-cell class="van-cell2" title="优惠卷" value="无" is-link />
    <van-cell class="van-cell2" title="礼品" value="无" is-link />
    <van-cell class="van-cell2" title="发票" value="电子发票" is-link />
    <van-cell class="van-cell3" title="小计" color="red" :value="'￥'+jiage">
      <font class="fontjiage">￥{{jiage}}</font>
    </van-cell>

    <van-popup v-model="show" position="bottom">
      商品清单
      <br />
      <div class="spqddiv">
        <img
          class="spqdimg"
          :src="poot+'miaozishangchengFile/commodity/'+name+'/'+name+' '+colour+'.jpg'"
        />
        <div class="spqdfont">
          <font class="ft">{{name}}</font>&nbsp;&nbsp;&nbsp;
          <font>x{{num}}</font>
          <br />
          <font class="fm">{{nc}}&nbsp;&nbsp;&nbsp;{{colour}}</font>
          <font class="fj">{{jiage}}</font>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showfk" position="bottom">
      付款方式
      <br />
      <van-tabs>
        <van-tab title="在线支付">
          <div class="divzffs" @click="divzffs('微信')">
            <img class="imgzffs" src="@/assets/zffs/微信.png" />
            <div class="divfont2">
              <div class="zffsfont">微信</div>
              <van-divider
                contentPosition="center"
                customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
              ></van-divider>
            </div>
          </div>
          <div class="divzffs" @click="divzffs('支付宝')">
            <img class="imgzffs" src="@/assets/zffs/支付宝.png" />
            <div class="divfont2">
              <div class="zffsfont">支付宝</div>
              <van-divider
                contentPosition="center"
                customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
              ></van-divider>
            </div>
          </div>
          <div class="divzffs" @click="divzffs('小米钱包')">
            <img class="imgzffs" src="@/assets/zffs/钱包.png" />
            <div class="divfont2">
              <div class="zffsfont">小米钱包</div>
              <van-divider
                contentPosition="center"
                customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
              ></van-divider>
            </div>
          </div>
          <div class="divzffs" @click="divzffs('银行卡')">
            <img class="imgzffs" src="@/assets/zffs/银行卡.png" />
            <div class="divfont2">
              <div class="zffsfont">银行卡</div>
              <van-divider
                contentPosition="center"
                customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
              ></van-divider>
            </div>
          </div>
        </van-tab>
        <van-tab title="分期支付">敬请期待。。。。。</van-tab>
      </van-tabs>
    </van-popup>
    <van-toast id="van-toast" />
    <div class="divfk">
      <font>共{{list.length}}件，应付金额</font>
      <font class="fontjiage">￥{{jiage}}</font>
      <van-button round type="info" color="red" @click="qufukuang">去付款</van-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Header2 from "@/components/Headergl/Header2";

export default {
  data() {
    return {
      jiage: this.$route.params.jiage,
      name: this.$route.params.name,
      num: this.$route.params.num,
      nc: this.$route.params.nc,
      colour: this.$route.params.yanse,
      address:this.$route.params.address,
      show: false,
      showfk: false,
      result: ["a", "b"],
      list: [],
      list2: {},
      zf: ""
    };
  },
  methods: {
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
    divzffs(zf) {
      this.showfk = !this.showfk;
      this.$http
        .get(
          this.poot +
            "addorder2/" +
            this.user +
            "/" +
            this.jiage +
            "/" +
            this.colour +
            "/" +
            this.nc +
            "/" +
            this.name +
            "/" +
            this.jiage +
            "/" +
            this.num+
            "/"+
            this.address
        )
        .then(response => {
          this.$notify({
            message: zf + "支付成功",
            background: "Pink",
            duration: 1000
          });
          this.$router.push("/quanbudingdan/0");
        })
        .catch(function(error) {
          console.log(error);
          // this.$toast("获取数据失败");
        });
    },

    xgdz() {},
    dibu() {
      this.show = !this.show;
    },
    qufukuang() {
      this.showfk = !this.showfk;
    },

    chushihua() {
      this.$http
        .get(this.poot + "selectuser/" + this.user)
        .then(response => {
          console.log(response.data);
          this.list2 = response.data;
        })
        .catch(function(error) {
          console.log(error);
          //this.$toast("获取数据失败");
        });
    }
  },
  mounted() {
    this.chushihua();
  },
  components: {
    Header2: Header2
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"]),
    ...mapState(["user"])
  }
};
</script>
<style scoped>
.zffsfont {
  margin-top: 10px;
  font-size: 15px;
}
.divzffs {
  text-align: left;
  margin-left: 20px;
  text-align: center;
}
.divfont2 {
  text-align: center;
  height: 50px;
}
.imgzffs {
  float: left;
  height: 30px;
  width: 30px;
}
.van-tab {
  width: 100%;
}
.van-cell5 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
}
.ft {
  font-size: 15px;
}
.fm {
  font-size: 5px;
}
.fj {
  color: red;
}
.spqdfont {
  height: 50px;
  margin-left: 25%;
}
.spqdimg {
  height: 50px;
  width: 50px;
  float: left;
}
.spqddiv {
  margin-top: 15px;
  text-align: left;
  margin-left: 20px;
}
.divfk {
  position: absolute;
  bottom: 0;
  margin-left: 20px;
  margin-bottom: 10px;
}
font {
  font-size: 5px;
}
.van-button {
  width: 80px;
  height: 40px;
  margin-left: 70px;
}
.fontjiage {
  color: red;
}
h3 {
  color: #fff;
  text-align: left;
  font-size: 15px;
  margin-left: 10px;
}
h4 {
  color: #fff;
  text-align: left;
  font-size: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.div {
  background-color: rgb(84, 223, 57);
  margin-top: 40px;
}
.imgsp {
  height: 50px;
  width: 50px;
  margin-left: 20px;
  float: left;
}
.imgdiv {
  text-align: left;
  height: 50px;
  width: 100%;
}
.van-popup {
  height: 50%;
  width: 100%;
}
.van-cell {
  width: 50px;
  height: 50px;
}
.van-cell2 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
}
.van-cell3 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  color: red;
}
.van-cell4 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  color: red;
  margin-top: 10px;
}
</style>